<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>找回密码</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3a0ca3;
            --accent-color: #7209b7;
            --light-color: #f8f9fa;
            --success-color: #2ecc71;
            --error-color: #e74c3c;
            --shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #4361ee, #3a0ca3);
            background-attachment: fixed;
            padding: 20px;
        }

        .password-card {
            position: relative;
            width: 100%;
            max-width: 480px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transform: translateY(0);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            animation: cardEntrance 0.6s ease-out;
        }

        .password-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .card-header {
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 30px 20px 35px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .card-header h1 {
            font-size: 2.2rem;
            font-weight: 600;
            margin-bottom: 8px;
            letter-spacing: 0.5px;
            position: relative;
            z-index: 2;
        }

        .card-header p {
            font-size: 1rem;
            opacity: 0.9;
            max-width: 350px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        .card-header::before,
        .card-header::after {
            content: "";
            position: absolute;
            width: 140px;
            height: 140px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
        }

        .card-header::before {
            top: -40px;
            left: -40px;
        }

        .card-header::after {
            bottom: -60px;
            right: -60px;
        }

        .card-body {
            padding: 30px 30px 20px;
            position: relative;
        }

        .input-group {
            position: relative;
            margin-bottom: 30px;
        }
        .input-group .btn-code {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 8px 14px;
            font-size: 0.9rem;
            border-radius: 20px;
            cursor: pointer;
            transition: background 0.3s ease;
            z-index: 2;
        }

        .input-group .btn-code:hover {
            background: var(--accent-color);
        }

        .input-group i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.1rem;
            color: #777;
            transition: color 0.3s;
            z-index: 2;
        }

        /* 调整输入框padding以适应内部按钮 */
        .input-group input {
            width: 100%;
            height: 56px;
            padding: 0 48px 0 48px; /* 左右对称的内边距 */
            font-size: 1rem;
            border-radius: 12px;
            border: 2px solid #e0e0e0;
            background: #f9f9f9;
            transition: all 0.3s ease;
            outline: none;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            position: relative;
            z-index: 1;
        }

        .input-group input:focus {
            border-color: var(--primary-color);
            background: white;
            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.2);
        }

        .input-group input:focus + i {
            color: var(--primary-color);
        }

        .input-group input::placeholder {
            color: #999;
        }

        /* 密码切换按钮样式优化 */
        .password-toggle {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #777;
            font-size: 1.2rem;
            z-index: 2;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .password-toggle:hover {
            color: var(--primary-color);
            background-color: rgba(0, 0, 0, 0.05);
        }

        .password-toggle.active {
            color: var(--primary-color);
            background-color: rgba(67, 97, 238, 0.1);
        }

        .password-strength {
            display: flex;
            gap: 3px;
            margin-top: 8px;
            height: 5px;
        }

        .password-strength span {
            flex: 1;
            border-radius: 3px;
            background-color: #e0e0e0;
            transition: background-color 0.3s;
        }

        .flex-options {
            display: flex;
            justify-content: flex-end;
            margin: 25px 0;
            font-size: 0.9rem;
        }

        .option-link {
            color: var(--primary-color);
            text-decoration: none;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .option-link:hover {
            color: var(--accent-color);
            text-decoration: underline;
        }

        .btn-reset {
            display: block;
            width: 100%;
            height: 56px;
            background: linear-gradient(to right, var(--accent-color), var(--primary-color));
            color: white;
            font-size: 1.1rem;
            font-weight: 600;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(67, 97, 238, 0.4);
            letter-spacing: 0.5px;
            position: relative;
            overflow: hidden;
        }

        .btn-reset:hover {
            background: linear-gradient(to right, var(--primary-color), var(--accent-color));
            transform: translateY(-2px);
            box-shadow: 0 7px 20px rgba(67, 97, 238, 0.6);
        }

        .btn-reset:active {
            transform: translateY(0);
        }

        .btn-reset::after {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                    90deg,
                    transparent,
                    rgba(255, 255, 255, 0.3),
                    transparent
            );
            transition: 0.5s;
        }

        .btn-reset:hover::after {
            left: 100%;
        }

        .card-footer {
            text-align: center;
            padding: 20px 0;
            font-size: 0.9rem;
            color: #777;
            border-top: 1px solid #eee;
            margin: 0 30px;
        }

        @keyframes cardEntrance {
            0% {
                opacity: 0;
                transform: translateY(30px) scale(0.96);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* 基础消息样式 */
        .error-message, .success-message {
            position: relative;
            padding: 15px 20px;
            margin-bottom: 20px;
            border-radius: 8px;
            font-size: 14px;
            display: flex;
            align-items: center;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            transition: all 0.4s ease;
            transform: translateY(0);
            opacity: 1;
            animation: slideIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .error-message.hide, .success-message.hide {
            animation: fadeOut 0.3s forwards;
        }

        /* 错误消息特效 */
        .error-message {
            background: linear-gradient(to right, #ff6b6b, #ff5252);
            color: white;
            border-left: 4px solid #d32f2f;
        }

        /* 成功消息特效 */
        .success-message {
            background: linear-gradient(to right, #4CAF50, #2E7D32);
            color: white;
            border-left: 4px solid #1B5E20;
        }

        /* 图标样式 */
        .error-message i, .success-message i {
            font-size: 18px;
            margin-right: 12px;
        }

        /* 动画效果 */
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeOut {
            to {
                opacity: 0;
                transform: translateY(-10px);
            }
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .success-overlay {
            background: white;
            padding: 40px;
            border-radius: 16px;
            text-align: center;
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
            transform: scale(0.9);
            opacity: 0;
            transition: all 0.4s ease;
            max-width: 90%;
        }

        .overlay.show .success-overlay {
            opacity: 1;
            transform: scale(1);
        }

        .success-overlay i {
            font-size: 64px;
            color: #2ecc71;
            margin-bottom: 20px;
        }

        .success-overlay h3 {
            font-size: 24px;
            margin-bottom: 10px;
            color: #333;
        }

        .success-overlay p {
            color: #666;
            margin-bottom: 30px;
        }

        @media (max-width: 600px) {
            body {
                padding: 15px;
            }

            .password-card {
                max-width: 100%;
            }

            .card-header {
                padding: 25px 15px 30px;
            }

            .card-header h1 {
                font-size: 1.9rem;
            }

            .card-body {
                padding: 20px 15px 15px;
            }

            .success-overlay {
                padding: 25px;
            }

            /* 移动端调整输入框padding */
            .input-group input {
                padding: 0 42px 0 42px;
            }
        }
    </style>
</head>
<body>
<div class="password-card">
    <div class="card-header">
        <h1>找回密码</h1>
        <p>请提供您的注册邮箱重置密码</p>
    </div>

    <div class="card-body">
        <form id="resetForm">
            <div class="input-group">
                <i class="fas fa-envelope"></i>
                <input type="email" id="email" name="email" placeholder="请输入注册邮箱" required>
            </div>
            <div class="input-group">
                <i class="fas fa-envelope-open-text"></i>
                <input type="text" id="verificationCode" name="code" placeholder="请输入邮箱验证码" maxlength="6" required>
                <button type="button" id="sendCodeBtn" class="btn-code">发送验证码</button>
            </div>

            <div class="input-group">
                <i class="fas fa-lock"></i>
                <input type="password" id="newPassword" name="newPassword" placeholder="请输入新密码" minlength="8" required>
                <!-- 密码切换按钮移动到输入框内部 -->
                <span class="password-toggle" id="passwordToggle">
                    <i class="fas fa-eye"></i>
                </span>
                <div class="password-strength">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>

            <div class="flex-options">
                <a href="../login.html" class="option-link">
                    <i class="fas fa-arrow-left"></i> 返回登录
                </a>
            </div>

            <button type="submit" class="btn-reset">
                <i class="fas fa-redo"></i> 重置密码
            </button>
        </form>
    </div>

    <div class="card-footer">
        <p>© 2023 智能小区管理系统. 保留所有权利</p>
    </div>
</div>

<!-- 密码重置成功覆盖层 -->
<div class="overlay" id="successOverlay">
    <div class="success-overlay">
        <i class="fas fa-check-circle"></i>
        <h3>密码重置成功！</h3>
        <p>正在跳转到登录页面...</p>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        const form = $('#resetForm');
        const passwordInput = $('#newPassword');
        const strengthSpans = $('.password-strength span');
        const successOverlay = $('#successOverlay');
        const passwordToggle = $('#passwordToggle');
        let countdownTimer = null; // 倒计时计时器
        const successOverlayContent = $('.success-overlay');

        // 隐藏重置成功的覆盖层
        successOverlay.hide();

        // 发送验证码按钮点击事件
        $('#sendCodeBtn').on('click', function () {
            const email = $('#email').val().trim();
            const emailRegex = /^\S+@\S+\.\S+$/;

            if (!emailRegex.test(email)) {
                showError('请先输入有效的电子邮箱');
                return;
            }

            const btn = $(this);

            // 禁用按钮防止重复点击
            btn.prop('disabled', true);

            // 清除现有计时器（如果存在）
            if (countdownTimer) {
                clearInterval(countdownTimer);
            }

            // 发送请求获取验证码
            $.ajax({
                url: "/user/sendCode",
                method: "POST",
                data: { email: email },
                dataType: 'json',
                success: function(res) {
                    if (res.code === 0) {
                        showSuccess('验证码已发送，请查收邮箱');
                        startCountdown(btn, 60);
                    } else {
                        showError(res.msg || '验证码发送失败');
                        btn.prop('disabled', false).text('发送验证码');
                    }
                },
                error: function() {
                    showError('网络错误，请稍后再试');
                    btn.prop('disabled', false).text('发送验证码');
                }
            });
        });

        // 开始倒计时
        function startCountdown(btn, seconds) {
            let remaining = seconds;
            btn.text(`重新发送(${remaining})`);

            countdownTimer = setInterval(() => {
                remaining--;
                btn.text(`重新发送(${remaining})`);

                if (remaining <= 0) {
                    clearInterval(countdownTimer);
                    btn.prop('disabled', false).text('发送验证码');
                }
            }, 1000);
        }

        // 密码显示/隐藏功能
        passwordToggle.on('click', function() {
            const icon = $(this).find('i');
            const newType = passwordInput.attr('type') === 'password' ? 'text' : 'password';
            const newIcon = newType === 'text' ? 'fa-eye-slash' : 'fa-eye';

            passwordInput.attr('type', newType);
            icon.removeClass('fa-eye fa-eye-slash').addClass(newIcon);

            // 添加/移除激活状态
            passwordToggle.toggleClass('active', newType === 'text');
        });

        // 密码强度实时检测
        passwordInput.on('input', function() {
            const password = passwordInput.val();
            let strength = 0;

            // 长度检查
            if (password.length >= 8) strength++;
            // 大写字母检查
            if (/[A-Z]/.test(password)) strength++;
            // 数字检查
            if (/[0-9]/.test(password)) strength++;
            // 特殊字符检查
            if (/[^A-Za-z0-9]/.test(password)) strength++;

            // 更新UI
            updateStrengthIndicator(strength);
        });

        // 更新密码强度指示器
        function updateStrengthIndicator(strength) {
            strengthSpans.each(function(index) {
                if (index < strength) {
                    // 基于强度设置不同颜色
                    $(this).css('backgroundColor',
                        strength < 2 ? '#e74c3c' :
                            strength < 4 ? '#f39c12' : '#2ecc71');
                } else {
                    $(this).css('backgroundColor', '#e0e0e0');
                }
            });
        }

        // 表单提交处理
        form.on('submit', function(e) {
            e.preventDefault();

            // 获取表单数据
            const email = $('#email').val().trim();
            const newPassword = $('#newPassword').val();
            const verificationCode = $('#verificationCode').val();
            const emailRegex = /^\S+@\S+\.\S+$/;

            // 表单验证
            if (!emailRegex.test(email)) {
                showError('请输入有效的电子邮箱地址');
                return false;
            }

            if (newPassword.length < 8) {
                showError('密码长度至少为8个字符');
                return false;
            }

            if (!verificationCode || verificationCode.length !== 6) {
                showError('请输入6位数字的验证码');
                return false;
            }

            // 验证通过，显示加载状态
            const btn = $('.btn-reset');
            const originalBtnText = btn.html();
            btn.html('<i class="fas fa-spinner fa-spin"></i> 处理中...').prop('disabled', true);

            // 添加节流，防止连续点击
            form.off('submit');

            // 发送重置密码请求
            $.ajax({
                url: "/user/reset-password",
                method: "POST",
                data: {
                    code: verificationCode,
                    email: email,
                    password: newPassword
                },
                dataType: 'json',
                success: function(res) {
                    if (res.code === 0) {
                        // 显示成功覆盖层
                        showSuccessOverlay();

                        // 2秒后跳转
                        setTimeout(() => {
                            window.location.href = '../login.html';
                        }, 2000);
                    } else {
                        showError(res.message || '重置密码失败');
                    }
                },
                error: function() {
                    showError('网络错误，请稍后重试');
                },
                complete: function() {
                    btn.html(originalBtnText).prop('disabled', false);
                    form.on('submit', arguments.callee);
                }
            });
        });

        // 显示成功覆盖层
        function showSuccessOverlay() {
            successOverlay.addClass('show');
            successOverlayContent.css('transform', 'scale(0.9)').css('opacity', 0);

            // 小延迟后触发动画
            setTimeout(() => {
                successOverlayContent.css('transform', 'scale(1)').css('opacity', 1);
            }, 100);
        }

        // 错误提示函数
        function showError(message) {
            // 移除旧的提示框
            $('.error-message').remove();

            // 创建错误提示元素
            const errorDiv = $(`
                <div class="error-message">
                    <i class="fas fa-exclamation-triangle"></i>
                    <span>${message}</span>
                </div>
            `);

            // 插入到卡片顶部
            $('.card-body').prepend(errorDiv);

            // 5秒后移除
            setTimeout(() => {
                errorDiv.addClass('hide');
                setTimeout(() => errorDiv.remove(), 300);
            }, 5000);
        }

        // 成功提示函数
        function showSuccess(message) {
            // 移除旧的提示框
            $('.success-message').remove();

            // 创建成功提示元素
            const successDiv = $(`
                <div class="success-message">
                    <i class="fas fa-check-circle"></i>
                    <span>${message}</span>
                </div>
            `);

            // 插入到卡片顶部
            $('.card-body').prepend(successDiv);

            // 5秒后移除
            setTimeout(() => {
                successDiv.addClass('hide');
                setTimeout(() => successDiv.remove(), 300);
            }, 5000);
        }

        // 输入框聚焦效果
        $('.input-group input').on('focus', function() {
            $(this).parent().css('transform', 'scale(1.02)');
        }).on('blur', function() {
            $(this).parent().css('transform', 'scale(1)');
        });
    });
</script>
</body>
</html>